import { Form, Input } from 'antd';
import * as React from 'react';
import './style.scss';

export interface IProps {
  /** 组件显示的当前值 */
  currentValue: number;
  /** total决定li个数 */
  total?: number;
  /** 回调函数 */
  onChange: Function;
}

/**严格度编辑组件
 * total默认是5，表示等级为：1-5
 * 功能描述：可以选择等级色块，同时值显示在色块后
 */
export const StrictLevelSelect: React.FC<IProps> = ({ currentValue, total = 5, onChange }) => {
  const list = new Array(total);
  for (let i = 0; i < list.length; i++) {
    list[i] = i + 1;
  }

  return (
    <div className="strict-level">
      <div className="level-wrap">
        <ul>
          {list.map(item => (
            <li
              className={item <= currentValue ? 'on' : ''}
              key={item}
              onClick={() => onChange(item)}
            ></li>
          ))}
        </ul>
        <Form.Item noStyle name="strictnessLevel">
          <Input className="level-txt" bordered={false} disabled />
        </Form.Item>
      </div>
      <div className="level-tip">数字越大表示匹配严格度越严格</div>
    </div>
  );
};
